<script setup lang="ts">
import { reactive } from 'vue'

const versions = reactive(window.electron.process.versions)
</script>

<template>
  <ul
    class="versions flex flex-wrap gap-2 bg-[#fff] p-2 rounded overflow-hidden shadow-sm shadow-slate-400"
  >
    <li class="electron-version">Electron v{{ versions.electron }}</li>
    <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
    <li class="node-version">Node v{{ versions.node }}</li>
    <li class="v8-version">V8 v{{ versions.v8 }}</li>
  </ul>
</template>

<style lang="scss" scoped>
.versions {
  li {
    @apply text-sm text-gray-500 whitespace-nowrap leading-[1];
    &:not(:last-child) {
      @apply border-gray-400 border-r-[1px] border-solid pr-2;
    }
  }
}
</style>
